.header {
  background: url("../img/page5/title.png") center no-repeat;
}

.main-content {
  .change-list {
    position: absolute;
    right: 20px;
    top: 0;

    >ul {
      >li {
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        width: 152px;
        height: 33px;
        line-height: 33px;
        text-align: center;
        background: url("../img/page5/unselected.png");

        &:nth-child(1) {
          i {
            display: inline-block;
            vertical-align: middle;
            width: 64px;
            height: 20px;
            background: url("../img/page5/1-un.png") center no-repeat;
          }
        }

        &:nth-child(2) {
          i {
            display: inline-block;
            vertical-align: middle;
            width: 104px;
            height: 20px;
            background: url("../img/page5/2-un.png") center no-repeat;
          }
        }

        &.active,
        &:hover {
          width: 152px;
          height: 33px;
          background: url("../img/page5/selected.png");

          &:nth-child(1) {
            i {
              width: 81px;
              height: 24px;
              background: url("../img/page5/1-se.png") center no-repeat;
            }
          }

          &:nth-child(2) {
            i {
              width: 133px;
              height: 24px;
              background: url("../img/page5/2-se.png") center no-repeat;
            }
          }
        }
      }
    }
  }

  .sum-list {
    width: 100%;
    height: 150px;

    .sum-detail {
      width: 570px;
      height: 150px;
      background: url("../img/page5/sum-bg.png");

      .icon {
        background: url("../img/page5/icon.png") center no-repeat;
      }

      .icon-text {
        height: 100%;
        padding-top: 25px !important;
        padding-left: 10px;

        .text-name {
          font-size: 25px !important;
          line-height: 50px;
          padding-left: 10px;
          color: #1da0e0;
        }

        .text-number {
          font-size: 34px !important;
          letter-spacing: 1px;
          font-weight: bold;
        }
      }
    }
  }

  .detail-container {
    position: relative;
    margin-top: 15px;
  }

  .table-container {
    margin-bottom: 10px;

    &.left {
      float: left;

      .vticker-container {
        width: 400px;
        height: 729px;
        background: url("../img/page5/left.png");
      }
    }

    &.right {
      position: relative;
      width: 1455px;
      height: 767px;
      float: right;
      overflow: hidden;

      .vticker-container {
        position: absolute;
        right: -1475px;
        width: 1455px;
        height: 729px;
        background: url("../img/page5/right.png");
      }
    }

    .title {
      width: 185px;
      height: 33px;
      line-height: 33px;
      font-size: 24px;
      margin-bottom: 10px;
      background: url("../img/page7/l-title.png");
    }

    .vticker-container {
      width: 928px;
      height: 429px;
      padding: 16px;

      .vticker-header {
        width: 100%;
        height: 55px;
        line-height: 55px;
        color: #00fcff;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        background: #0428b1;

        ul {
          width: 100%;
          display: flex;

          li {
            flex: 1;
            border: none !important;
          }
        }
      }

      .vticker-body {
        height: 638px;

        ul {
          >li {
            display: flex;

            &.even {
              background: #0428b1;
            }

            div {
              flex: 1;
              text-align: center;
              height: 58px;
              line-height: 58px;
              font-size: 19px;
              overflow: visible;
              border-right: none;
              word-break: break-word;

              &.time {
                line-height: 29px;
                word-break: break-word;
              }
            }
          }
        }
      }
    }
  }
}